<template>
  <div>
    <!-- 综合评价 -->
    <div class="rating_header">
      <div class="rating_header_left">
        <p>{{ rating.overall_score }}</p>
        <span>综合评价</span><br />
        <i>高于周边商家{{ Math.round(rating.compare_rating * 100) }}%</i>
      </div>
      <div class="rating_header_right">
        <p>
          <span>服务态度</span>
          <van-rate
            v-model="rating.service_score"
            :size="12"
            color="#ff9a0d"
            void-icon="star"
            void-color="#eee"
            readonly
          /><i>{{ rating.food_score }}</i>
        </p>

        <p>
          <span>菜品评价</span>
          <van-rate
            v-model="rating.food_score"
            :size="12"
            color="#ff9a0d"
            void-icon="star"
            void-color="#eee"
            readonly
          /><i>{{ rating.service_score }}</i>
        </p>

        <p>
          <span>送达时间</span> <em>{{ rating.deliver_time }}</em>
        </p>
      </div>
    </div>

    <!-- 各种评价 -->
    <div class="center">
      <div
        v-for="(item, index) in arrList"
        :key="item.id"
        :class="{
          nice: item.name != '不满意',
          no: item.name == '不满意',
          all: index == isok,
        }"
        @click="btnFn(index, item.name)"
      >
        {{ item.name }}({{ item.count }})
      </div>
    </div>

    <!-- 用户评价 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="user" v-for="(item, index) in evaluateList" :key="index">
        <div class="user_left">
          <img :src="item.avatar ? item.avatar : baseurl" />
        </div>
        <div class="user_right">
          <div class="good">
            <span>{{ item.username }}</span>
            <span class="gt">{{ item.rated_at }}</span>
          </div>

          <div class="pig">
            <van-rate
              v-model="item.rating_star"
              :size="12"
              color="#ff9a0d"
              void-icon="star"
              void-color="#eee"
              readonly
            />
            {{ item.time_spent_desc }}
          </div>

          <div class="pi">
            <div
              class="pag"
              v-for="(val, index) in item.item_ratings"
              :key="index"
            >
              <img
                v-if="val.image_hash ? true : false"
                :src="val.image_hash"
                alt=""
              />
              <span class="white">{{ val.food_name }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { ratings, tags, remakes } from "../api/goodShoping";
export default {
  data() {
    return {
      value: 3,
      rating: {}, //头部部分评分
      arrList: [], //商铺评价分类
      isok: 0,
      evaluateList: [],
      baseurl: "http://elm.cangdu.org/img/default.jpg",
      loading: false,
      finished: false,
      offset: 1,
      limit: 1,
    };
  },

  created() {
    //评价分数
    // 餐馆ID
    ratings(this.$route.query.shopid).then((res) => {
      // console.log(res);
      this.rating = res.data;
    });
    //商铺评价分类

    tags(this.$route.query.shopid).then((res) => {
      //console.log(130, res);
      this.arrList = res.data;
    });
    this.getnews();
  },

  methods: {
    getnews() {
      remakes({
        restaurant_id: this.$route.query.shopid,
        tag_name: "全部",
        offset: this.offset,
        limit: this.limit,
      }).then((res) => {
        console.log(142, res);
        this.loading = false;
        res.data.forEach((item) => {
          if (item.avatar) {
            item.avatar = item.avatar.split("");
            item.avatar.splice(3, 0, "/");
            item.avatar.splice(1, 0, "/");
            item.avatar = item.avatar.join("");
            item.avatar =
              "https://fuss10.elemecdn.com/" + item.avatar + ".jpeg";
          }

          item.item_ratings.forEach((val) => {
            if (val.image_hash) {
              val.image_hash = val.image_hash.split("");
              val.image_hash.splice(3, 0, "/");
              val.image_hash.splice(1, 0, "/");
              val.image_hash = val.image_hash.join("");
              val.image_hash =
                "https://fuss10.elemecdn.com/" + val.image_hash + ".jpeg";
            }
          });
        });

        if (res.data < this.limit) {
          this.finished = true;
        }

        this.evaluateList = [...res.data, ...this.evaluateList];
      });
    },

    btnFn(index, name) {
      this.isok = index;
      console.log(name);
      remakes({
        restaurant_id: 1,
        tag_name: name,
      }).then((res) => {
        console.log(res);
        console.log(res);
        res.data.forEach((item) => {
          if (item.avatar) {
            item.avatar = item.avatar.split("");
            item.avatar.splice(3, 0, "/");
            item.avatar.splice(1, 0, "/");
            item.avatar = item.avatar.join("");
            item.avatar =
              "https://fuss10.elemecdn.com/" + item.avatar + ".jpeg";
          }

          item.item_ratings.forEach((val) => {
            if (val.image_hash) {
              val.image_hash = val.image_hash.split("");
              val.image_hash.splice(3, 0, "/");
              val.image_hash.splice(1, 0, "/");
              val.image_hash = val.image_hash.join("");
              val.image_hash =
                "https://fuss10.elemecdn.com/" + val.image_hash + ".jpeg";
            }
          });
        });

        this.evaluateList = res.data;
      });
    },

    onLoad() {
      // 加载状态结束
      this.offset++;
      this.getnews();
    },
  },
};
</script>

<style lang="less" scoped>
.rating_header {
  display: flex;
  width: 100%;
  height: 80px;
  background-color: #fff;
  padding: 10px;
  align-items: center;

  .rating_header_left {
    text-align: center;
    margin-left: 15px;
    width: 30%;
    p {
      font-size: 24px;
      color: #ff6f0f;
    }
    i {
      font-size: 12px;
      color: #c5c5c5;
    }
  }
  .rating_header_right {
    display: flex;
    flex-direction: column;
    margin-left: 35px;
    flex: 1;
    i {
      color: #ff6f0f;
      font-size: 12px;
    }
    em {
      font-size: 12px;
    }
    p {
      margin: 2px 0;
    }
    span {
      margin-right: 8px;
    }
  }
}

.center {
  margin-top: 5px;
  width: 100%;
  height: 160px;
  background-color: #fff;
  display: flex;
  text-align: center;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  padding: 5px;
  border-bottom: 1px solid #eee;

  .nice {
    background-color: #ebf5ff;
    width: 100px;
    height: 35px;
    line-height: 35px;
    margin: 0 2px;
    border-radius: 10px;
  }
  .no {
    background-color: #f5f5f5;
    width: 80px;
    height: 35px;
    line-height: 35px;
    margin: 0 3px;
    border-radius: 10px;
  }

  .all {
    background-color: #3190e8;
    width: 100px;
    height: 35px;
    border-radius: 10px;
    line-height: 35px;
    margin: 0 6px;
  }
}

.user {
  height: 160px;
  width: 100%;
  background-color: #fff;
  display: flex;
  margin: 20px 0;
  .user_left {
    width: 45px;
    background-color: #fff;
    height: 100%;
    img {
      width: 35px;
      height: 35px;
    }
  }

  .user_right {
    flex: 1;
    .gt {
      margin-left: 150px;
    }
    img {
      margin: 5px;
      width: 40px;
      height: 40px;
    }

    .pi {
      display: flex;
      .pag {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        color: #c5c5c5;
        .white {
          display: inline-block;
          width: 45px;
          border: 1px solid #c5c5c5;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-top: 10px;
        }
      }
    }

    .good {
      display: flex;

      justify-content: space-evenly;
    }
  }
}
</style>